<template>
  <!-- 针对培训师 -->
  <div v-if="ruleForm" class="firstTrainer">
    <el-form
      ref="ruleForm"
      :rules="rules"
      class="teaching-form"
      :model="ruleForm"
    >
      <el-form-item prop="TOPIC">
        <el-col :span="20">
          <el-col>
            <div class="title" style="margin-left: 10px;">课题</div>
          </el-col>
        </el-col>
        <el-col :span="20">
          <el-col :span="12">
            <el-select
              v-model="ruleForm.TOPIC"
              style="width: 100%;"
              filterable
              allow-create
              default-first-option
              placeholder="请选择或输入课题"
              :disabled="
                options.TOPIC && options.TOPIC.length > 0 ? false : true
              "
            >
              <el-option
                v-for="item in options.TOPIC"
                :key="item.chapterId"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-col>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-col :span="20">
          <el-col :span="12">
            <el-button
              type="primary"
              size="medium"
              plain
              style="width: 100%; margin-top: 20px;"
              :disabled="loading"
              @click="next('ruleForm')"
              >下一步</el-button
            >
          </el-col>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { findByPCateId, bookChapterList, updateBaseInfo } from '@/api/content'
export default {
  name: 'FirstStudent',
  props: ['list'],
  data() {
    return {
      loading: true,
      bizTypeEnum: 'PREPARELESSON',
      options: {
        TOPIC: {
          cateId: '',
          itemCode: '',
          itemName: ''
        }
      },

      ruleForm: {
        TOPIC: {
          chapterId: '',
          name: ''
        }
      },
      rules: {
        TOPIC: [{ required: true, message: '请选择课题!', trigger: 'change' }]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    // this.ruleForm.GROWTH_CLASSIFY = {
    //   cateId: '101',
    //   groupEnum: 'GROWTH_CLASSIFY',
    //   itemCode: '10001',
    //   itemName: '学科教学'
    // };
    this.ruleForm = this.list
    this.init()
  },
  methods: {
    async init() {
      // 获取课题
      await this.getBookChapterList()
    },

    // 章节列表查询 - 课题
    getBookChapterList() {
      bookChapterList({
        stage: this.ruleForm.STAGE.itemCode,
        subject: this.ruleForm.SUBJECT.itemCode,
        vers: this.ruleForm.TEXTBOOK_VERSION.itemCode,
        grade: this.ruleForm.GRADE.itemCode
      }).then(res => {
        this.options.TOPIC = res.data
        this.loading = false
      })
    },

    next(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log('submit!')
          var data = {
            author: this.list.baseInfo.user.name,
            grade: this.list.GRADE.itemCode,
            growthClassify: this.list.GROWTH_CLASSIFY.itemCode,
            id: this.list.baseInfo.id,
            state: this.list.STAGE.itemCode,
            subject: this.list.SUBJECT.itemCode,
            subjectVersion: this.list.TEXTBOOK_VERSION.itemCode,
            title: this.list.TOPIC,
            typeRole: this.list.baseInfo.typeRole
          }

          updateBaseInfo(data).then(res => {
            this.list.step = 'second'
            this.$emit('Callback', this.list)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
